<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="nav">
        <a href="#/home">首页</a>
        <a href="#/service">服务</a>
        <a href="#/mine">个人中心</a>
    </div>
    <div class="content">

    </div>
</body>

</html>
<script>
    /* 
        整个应用只是用一个HTML文档实现
        单页面路由---随着url地址的变化，动态更新网页(HTML文档)的内容

        前端路由：
        主要关注的是url地址的变化和对应资源的关系
        前端路由一般由前端程序员来维护
        前端路由的实现方案：
        方案一：hash路由
        方案二：history路由
        后端路由：
        主要关注的是，url地址的变化和后端数据的关系
        后端路由一般由后端程序员来维护
    
    */
    //hash路由
    //监听url地址的改变
    /* 
    思路：
    用hashchange事件  监听url地址中hash值的变化，只要hash值发生变化 hashchange的回调函数就会执行，
    在回调函数内部获取最新的hash值（location.hash）,使用switch或if判断，根据不同的hash值调用不同的函数，
    完成内容的渲染
    */
    window.onhashchange = function () {
        // console.log(location.hash);
        switch (location.hash) {
            case '#/home': home_page(); break
            case '#/service': service_page(); break
            case '#/mine': mine_page(); break
        }
    }
    //渲染首页的内容
    function home_page() {
        document.querySelector('.content').innerHTML = '首页的内容'
    }
    //渲染服务的内容
    function service_page() {
        document.querySelector('.content').innerHTML = '服务的内容'
    }
    //渲染个人中心的内容
    function mine_page() {
        document.querySelector('.content').innerHTML = '个人中心的内容'
    }


</script>